<template>
	<view class="login_container">
		<view class="icon">
			<image class="icon_image" src="/static/images/logo.png" mode=""></image>
		</view>

		<view class="title">
			临沂三江纸制品有限公司-小程序
		</view>


		<view class="p30">
			<u--form labelPosition="top" :model="model" :rules="rules" ref="uForm">
				<u-form-item label="账号" prop="userInfo.username" borderBottom ref="item">
					<u--input v-model="model.userInfo.username" placeholder="请输入账号" border="none"></u--input>
				</u-form-item>
				<u-form-item label="密码" prop="userInfo.password" borderBottom ref="item">
					<u--input v-model="model.userInfo.password" password placeholder="请输入密码" border="none"></u--input>
				</u-form-item>
			</u--form>
		</view>



		<view class="p30">
			<u-button text="登录" @click="submit" type="warning"></u-button>
		</view>
	</view>
</template>

<script>
	import {VITE_APP_CLIENT_ID} from '@/config/index.js'
	export default {
		data() {
			return {
				model: {
					userInfo: {
						username: '',
						password: '',
					}
				},
				rules: {
					'userInfo.username': {
						type: 'string',
						required: true,
						message: '请输入账号',
						trigger: ['blur', 'change']
					},
					'userInfo.password': {
						type: 'string',
						required: true,
						message: '请输入密码',
						trigger: ['blur', 'change']
					},
				},
			};
		},
		methods: {
			submit() {
				const _this = this
				this.$refs.uForm.validate().then(res => {
					
					_this.$store.dispatch('Login', _this.model.userInfo)
					
					// _this.$api.testlogin({
					// 	..._this.model.userInfo,
					// 	tenantId: '000000',
					// 	rememberMe: false,
					// 	clientId: 'e5cd7e4891bf95d1d19206ce24a7b32e',
					// 	grantType: 'password'
					// })
				}).catch(errors => {
					// uni.$u.toast('校验失败')
				})
			}
		},
		onReady() {
			//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
			this.$refs.uForm.setRules(this.rules)
		},
	}
</script>

<style scoped lang="scss">
	.login_container {
		padding-top: 200rpx;

		.icon {
			display: flex;
			align-items: center;
			justify-content: center;


			&_image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 50%;
			}
		}

		.title {
			margin-top: 30rpx;
			text-align: center;
			font-weight: bold;
			font-size: 32rpx;
		}
	}
</style>